<script lang="ts" setup>
import { IReader, readerModel } from '@/api/reader/reader';
import { FormConfig } from '@/components/Form/types';
import { NInput } from 'naive-ui';
import { computed, ref, unref } from 'vue';

interface Props {
  data: Partial<IReader>
}
const props = defineProps<Props>();
const emits = defineEmits(['close', 'submit']);
const formData = ref<Partial<IReader>>({
  readerName: '',
  remark: '',
  ...props.data
});

const config = computed<FormConfig<typeof formData.value>[]>(() => [
    {
      type: 'component',
      label: '读者名称:',
      component: NInput,
      key: 'readerName',
      props: {
        maxlength: 20
      },
      itemProps: {
        rule: [
          { required: true, validator(rule, value) {
            if(!value) {
              return new Error('读者名称不能为空！');
            }
            return true;
          }, trigger: 'blur' }
        ]
      }
    },
    {
      type: 'component',
      label: '备注:',
      component: NInput,
      key: 'remark',
      props: {
        type: 'textarea',
        maxlength: 200
      }
    },
    {
      type: 'slot',
      slotName: 'submit'
    }
]);
const readerUpgradeForm = ref();
async function submit() {
  await readerUpgradeForm.value.validate();
  const params = {
    ...unref(formData)
  };
  await readerModel.upgrade(params);
  emits('submit');
}
</script>
<template>
  <div>
    <Form
      ref="readerUpgradeForm"
      v-model:data="formData"
      :label-width="90"
      :config="config"
    >
    <template #submit>
        <div class="flex justify-end gap-mini">
          <NButton @click="emits('close')">
            取消
          </NButton>
          <NButton type="primary" @click="submit">
            确定
          </NButton>
        </div>
      </template>
    </Form>
  </div>
</template>
